<style>
    /*.layui-input, .layui-textarea {*/
    /*    display: block;*/
    /*    width: 85%;*/
    /*    padding-left: 10px;*/
    /*}*/

    .layui-form-label.required:before { /* 这种写法也可以*/
        content: ' *';
        color: red;
    }

    .proTaskForm .layui-form-label{
        width: 110px;
    }
    .proTaskForm .layui-input-block {
        margin-left: 140px;
    }

    .layui-form-select dl {
        left: 33px;
        min-width: 88%;
    }
</style>
<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>

<form lay-filter="proTaskForm" class="layui-form proTaskForm open-form">
    <div class="open-model">
        <div class="open-auto">
            <div class="layui-form-item layui-row">
                <div class="layui-col-md4">
                    <label class="layui-form-label required">所属物料类型：</label>
                    <div class="layui-input-block">
                        <div style="" id="productTypeName" lay-filter="productTypeName">
                        </div>
                        <input id="productTypeId" name="productTypeId" type="hidden">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label required">所属物料性质：</label>
                    <div class="layui-input-block">
                        <select id="qualityTestingCategoryId" name="qualityTestingCategoryId" lay-filter="qualityTestingCategoryId"
                                class="common-select-search">
                        </select>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label required">质检性质：</label>
                    <div class="layui-input-block">
                        <select id="productNatureId" name="productNatureId"
                                lay-filter="productNatureId"
                                class="common-select-search">
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md4">
                    <label class="layui-form-label required">质检类型：</label>
                    <div class="layui-input-block">
                        <select id="qualityTestingTypeFormId" name="qualityTestingTypeFormId" class="common-select-search"
                                lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label required">模板名称：</label>
                    <div class="layui-input-block">
                        <input name="name" class="layui-input" type="text" placeholder="请输入工单编号"/>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label required">责任部门：</label>
                    <div class="layui-input-block">
                        <input id="departmentId" type="hidden" name="departmentId"/>
                        <div id="selectDepartment"></div>

                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md4">
                    <label class="layui-form-label required">责任岗位：</label>
                    <div class="layui-input-block">
                        <select id='postId' name="postId"
                                lay-filter="postId"
                                class="common-select-search">
                        </select>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label required">模板备注：</label>
                    <div class="layui-input-block">
                        <input type="text" id="remark" name="remark" class="layui-input"
                               lay-filter="remark"/>
                    </div>
                </div>
            </div>
            <div>
                <button type="button" class="layui-btn" id="addTable">配置质检参数</button>
                <table class="layui-table" id="qualityTemplateFormTable" lay-filter="qualityTemplateFormTable"></table>
            </div>
        </div>
        <div class="layui-form-item text-right pd-20">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="qualityTemplateFormSubmit" lay-submit>保存</button>
        </div>
    </div>
</form>

<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'admin', 'laytpl', 'config', 'table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var config = layui.config;
        var table = layui.table;
        var admin = layui.admin;
        var form = layui.form;
        var table = layui.table;

        const id = window.parentData.id
        let formData = {}
        if (id) {
            admin.req('enterprise/quality/admin/qualityTemplate/detail', {'templateId': id}, function (res) {
                formData = res.data
                formData.templateId = id
                formData.paramVoList= res.data.paramVoList
                //所属物料类型
                admin.initDataSelectTree(true, 'enterprise/product/admin/productType/getTreeData', {materialNatureList: [2, 3, 7]}, 'productTypeName', res.data.materialTypeId, "物料分类", "productTypeId", function () {
                    table.reload('qualityTemplateFormTable', {
                        data: []  // 设置新的数据
                    });
                });
                //所属物料性质
                admin.getDictList("qualityTestingCategoryId", "product_nature", res.data.qualityTestingCategoryId, "所属物料性质");
                //质检性质
                admin.getDictList("productNatureId", "pro_quality_testing_nature", res.data.productNatureId, "质检性质");

                $('#productTypeId').val(res.data.materialTypeId)
                //质检类型
                admin.initDataSelectAndMap('production/qualityTesting/admin/qualityTestingType/list', {limit: 9999}, "qualityTestingTypeFormId", res.data.qualityTestingTypeId, "质检类型", "name", "id", null);
                //部门列表
                admin.initDataSelectTree(true, 'user/admin/role/getTreeData', null, 'selectDepartment', res.data.departmentId, "部门", "departmentId", function (data) {
                    // 获取部门ID
                    let departmentId = data.change[0].value;
                    //赋值部门id
                    $('#departmentId').val(data.change[0].value);
                    $('#postId').empty();
                    //部门下的岗位列表
                    admin.initDataSelect("user/admin/role/getPostData", {roleId: departmentId}, "postId", null, "岗位", null, null);
                });
                admin.initDataSelect("user/admin/role/getPostData", {roleId: res.data.departmentId}, "postId", res.data.postId, "岗位", null, null);

                table.reload('qualityTemplateFormTable', {
                    data: res.data.paramVoList  // 设置新的数据
                });

                form.val('proTaskForm', res.data);
                form.render("select")


            })
        } else {
            formData = {}
            //所属物料性质
            admin.getDictList("qualityTestingCategoryId", "product_nature", null, "所属物料性质");
            //质检性质
            admin.getDictList("productNatureId", "pro_quality_testing_nature", null, "质检性质");

            admin.initDataSelectTree(true, 'enterprise/product/admin/productType/getTreeData', {materialNatureList: [2, 3, 7]}, 'productTypeName', null, "物料分类", "productTypeId", function () {
                table.reload('qualityTemplateFormTable', {
                    data: []  // 设置新的数据
                });
            });
            //质检类型
            admin.initDataSelectAndMap('production/qualityTesting/admin/qualityTestingType/list', {limit: 9999}, "qualityTestingTypeFormId", null, "质检类型", "name", "id", null);

            //部门列表
            admin.initDataSelectTree(true, 'user/admin/role/getTreeData', null, 'selectDepartment', null, "部门", "departmentId", function (data) {
                // 获取部门ID
                let departmentId = data.change[0].value;
                //赋值部门id
                $('#departmentId').val(data.change[0].value);
                $('#postId').empty();
                //部门下的岗位列表
                admin.initDataSelect("user/admin/role/getPostData", {roleId: departmentId}, "postId", null, "岗位", null, null);
            });

        }

        $("#addTable").click(function () {
            let productTypeId = $('#productTypeId').val()
            if (productTypeId) {
                admin.formOpen({
                    type: 1,
                    area: '75%',
                    offset: ['16%', '16%'],
                    style: 'font-size: 20px;',
                    title: '添加质检模板',
                    path: `components/product/productType/productItem.html`,
                    success: function () {
                        parentData.productTypeId=productTypeId
                        parentData.checkList=table.cache['qualityTemplateFormTable']
                    },
                    finish: function (data) {
                        table.reload(insTb, {});
                    },
                    end: function () {
                        let newData = window.childData.list
                        table.reload('qualityTemplateFormTable', {
                            data: newData  // 设置新的数据
                        });
                    }
                });
            }else{
                layer.msg("请先选择物料类型", {icon: 2});
            }


        })

        function getQueryParams() {
            const params = new URLSearchParams(window.location.search);
            const id = params.get('id');
            const name = params.get('name');
        }

        getQueryParams();
        var insTb = table.render({
            elem: '#qualityTemplateFormTable',
            // url: config.base + 'enterprise/quality/admin/qualityTemplate/list',
            // page: true,
            // cellMinWidth: 100,

            cols: [[
                {type: 'numbers', title: '序号'},
                {field: 'name', align: 'center', title: '检测项目名称'},
                {field: 'code', align: 'center', title: '检测项目编码'},
                {field: 'itemCategoryName', align: 'center', title: '检测项目分类'},
                {field: 'itemTypeName', align: 'center', title: '检测类型'},
                {field: 'testTool', align: 'center', title: '检测器具'},
                {field: 'testMethodName', align: 'center', title: '检测方法',},
                {
                    align: 'center', toolbar: '#productItemTableBar', title: '操作', width: 160,
                    templet: function () {
                        return 123
                    }
                }
            ]],
            data: [],
            done: function (res, curr, count) {
                //移除按钮
            }
        });

        //模板提交
        form.on('submit(qualityTemplateFormSubmit)', function (d) {
            layer.load(2);
            d.field.qualityTestingTypeId = $('#qualityTestingTypeFormId').val();
            d.field.qualityTestingNatureId = $('#qualityTestingNatureFormId').val();
            d.field.materialTypeId = $('#productTypeId').val();
            // var allData =    table.cache['#qualityTemplateFormTable']
            console.log('table.cache[\'qualityTemplateFormTable\'];',table.cache['qualityTemplateFormTable'])
            formData.paramVoList = table.cache['qualityTemplateFormTable'];
            formData = {...formData, ...d.field}


            admin.req(`enterprise/quality/admin/qualityTemplate/${formData.id ? 'update' : 'add'}`, JSON.stringify(formData), function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('qualityTemplateTable');
                    insTb.reload();
                    layer.closeAll('page');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'POST', true, 'application/json; charset=utf-8');
            return false;
        })

        form.render('select');

    })
</script>